<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #result {
        width: 200px;
        height: 100px;
        border:solid 1px #90b
    }
</style>
<body>
    <button>点我发送请求</button>
    <div id="result"></div>
</body>
<script>
    //获取button元素
    const btn = document.getElementsByTagName('button')[0]
    const result = document.getElementById("result")
    btn.onclick = function () {
        //1、创建对象
        const xhr = new XMLHttpRequest()
        //2、初始化，设置请求方法url
        xhr.open('GET', 'http://127.0.0.1:8000/serve')
        //3、发送
        xhr.send()
        //4、事件绑定，处理服务端返回的结果
        //on when 当...时候
        //readystate 是xhr 对象中的属性， 表示状态 0 1 2 3 4 
        //change 改变
        // xhr.onreadystatechange = function () {
        //      //判断(服务端返回了所有的结果)
        //     if(xhr.readyState === 4) {
        //         //判断响应码状态 200 404 403 401 500
        //         //2、成功
        //         if(xhr.status >= 200 && xhr.status < 300){
        //             //处理结果 行 头 空行 体
        //             //1、响应行
        //             console.log(xhr.status)//状态码
        //             console.log(xhr.statusText)//状态字符串
        //             console.log(xhr.getAllResponseHeaders())//所有响应头
        //             console.log(xhr.response)
        //             result.innerText = xhr.response
        //         }else{

        //         }
        //     }
        // }
    }
</script>
</html>